<template>
  <view class="container">
    <Table ref="table" :fetchData="fetchData" :autoFetch="true" class="table">
      <template #default="{ data }">
        <view class="zxjc_card" v-for="item in data" :key="item.governCheckTaskId">
          <Card
            :stateColor="bgColors[item.governCheckResult]"
            :colors="colors[item.governCheckResult]"
            @click="onCardClick(item)"
            :title="
            item.governInvolveDanger
              ? item.governInvolveDanger
              : ''
            "
            :ff="formatTotal(item)"
            :fr="formatDate(item)"
            :content="
            item.governCheckTaskName
              ? item.governCheckTaskName
              : ''
            "
            :state="item.governCheckResult"
            v-if="item.governTaskPlanId !== activeId" 
          >
          </Card>
          
          <uni-card v-else>
            <view class="button-box">
            <uni-icons
              type="closeempty"
              class="close"
              size="30"
              @click="closeButton"
            ></uni-icons>
            
            <button 
              class="mini-btn"
              type="primary"
              @click="listTaskItem(item, 0)"
              size="mini"
            >
              全部排查项
            </button>
            <button
              class="mini-btn"
              type="primary"
              @click="listTaskItem(item, 1)"
              size="mini"
            >
              未排查项
            </button>
            <button
              class="mini-btn"
              type="primary"
              @click="listTaskItem(item, 2)"
              size="mini"
            >
              已排查项
            </button>
            
            <button
              class="mini-btn"
              type="primary"
              size="mini"
              :style="{backgroundColor: '#e6a23c'}"
              @click="toCreateYinHuan(item)"
            >
              录入隐患
            </button>
            </view>
          </uni-card>
        </view>
      </template>
    </Table>
  </view>
</template>
<script>
export default {
  // data() {
  //   return {
  //     row: {},
  //   };
  // },
  // onLoad(payload) {
  //   if (payload.row) {
  //     this.row = JSON.parse(decodeURIComponent(payload.row));
  //   }
  // },
};
</script>
<script setup>
import { ref, getCurrentInstance, reactive, onMounted } from "vue";
import { onShow } from "@dcloudio/uni-app";
import Table from "@/components/uniList.vue";
import { useAsyncData } from "@/hooks/useAsyncData.js";
import { apis as APIS } from "@/api/zxjc/zxjcrw.js";
import { router } from "@/router/index.js";
import { PATH } from "../paths";
import Card from "@/components/Card.vue";

const bgColors = ref({
  待排查: "#f8f0eb",
  进行中: "#e2f0d9",
  已排查: "#fceced",
  已超时: "#fceced",
});
const colors = ref({
  待排查: "#c55a11cf",
  进行中: "#00b050",
  已排查: "#f00",
  已超时: "#f00",
});
const parentNode = ref({});
const filterForm = reactive({
	governCheckSource: '专项检查',
	type: 0,
  // checkTaskConfigId: null,
});

const table = ref();
const { fetchData, getList, queryParams } = useAsyncData({
  table,
  APIS,
  filterForm,
});

const formatTotal = (item) => {
  return item.completeCount + "/" + (item.unCompleteCount + item.completeCount);
  // if (item.taskState == "已排查") {
  //   return "剩余:0";
  // }
  // const nowNum = Date.now();
  // const times = new Date(item.endTime).getTime();
  // let seconds = (times - nowNum) / 1000;
  // let text = "剩余:";
  // if (seconds <= 0) {
  //   if (seconds >= 3600) {
  //     let hour = (seconds / 3600).toFixed(1);
  //     text += hour + "小时";
  //   } else {
  //     let hour = (seconds / 60).toFixed(1);
  //     text += hour + "分钟";
  //   }
  // } else {
  //   text = "已超时";
  // }
  // return text;
};
const formatDate = (item) => {
  return item.governTaskStartTime + " 至 " + item.governTaskEndTime;
};

const activeId = ref("");
const selectRow = ref({});
const popup = ref();
const onCardClick = (item) => {
  activeId.value = item.governTaskPlanId;
  selectRow.value = item;
};

// 跳转隐患录入
const toCreateYinHuan = (item) => {
  let { governTaskPlanId, governTaskInfoId, governCheckTaskId } = item
  let data = {
    governTaskPlanId,
    governTaskInfoId,
    governCheckTaskId,
    isAdd: true
  }
  uni.navigateTo({
    url: `/pages/zxjc/yhgl/index?row=${decodeURIComponent(JSON.stringify(data))}`
  })
};

// 跳转排查项
const listTaskItem = (item, type) => {
  uni.navigateTo({
    // data=${decodeURIComponent(JSON.stringify(item))}
    // id=${item.governTaskPlanId}
    url: `/pages/zxjc/jcrw/list?type=${type}&data=${decodeURIComponent(JSON.stringify(item))}`
  })
};

const closeButton = () => {
  activeId.value = "";
};
</script>

<style lang="scss" scoped>
.container {
  padding: 20upx 14upx;
}
.table {
  height: 88vh;
  overflow-y: auto;
}
.zxjc_card{
  margin-bottom: 30upx;
}
.button-box {
  height: 138rpx;
  position: relative;
  left: -10rpx;
  // display: flex;
  // flex-wrap: wrap;
  // align-content: space-evenly;

  .mini-btn {
    margin: 5upx 6upx 0 6upx;
    width: 186rpx;
    // height: 60rpx;
    padding: 0 15upx;
    font-size: 24upx;
  }
}
.close {
  position: absolute;
  top: -10upx;
  right: -44upx;
  color: skyblue !important;
}
.title {
  display: flex;
  justify-content: space-between;

  &-left {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }
  &-times {
    background-color: rgb(22, 119, 255);
    padding: 2px;
    font-size: 12px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
    margin-left: 5px;
    color: #fff;
  }
}

:deep .uni-card{
  margin: 15rpx 15rpx 26rpx 15rpx !important;
}
</style>

